<template>
	<div class="mui-content invite-activity-container">
		<div class="invite-banner mui-slider ">
			<div class="mui-slider-group mui-slider-loop">
				<div class="mui-slider-item mui-slider-item-duplicate">
					<img src="../../images/act_ba02.png" alt="">
				</div>
				<div class="mui-slider-item">
					<img src="../../images/act_ba.png" alt="">
				</div>
				<div class="mui-slider-item">
					<img src="../../images/act_ba02.png" alt="">
				</div>
				<div class="mui-slider-item mui-slider-item-duplicate">
					<img src="../../images/act_ba.png" alt="">
				</div>
			</div>
			<!--  -->
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<div class="invite-title">
			<p>推荐好友关注，领取388元礼品券</p>
			<p>礼品券送完即止</p>
		</div>
		<div class="invite-info">
			<div class="invite-count">
				<span>已推荐</span>
				<span class="invite-count-num">{{inviteNum}}</span>位
				<span class="invite-count-rest-text">剩余</span>
				<span class="invite-count-rest-num">{{inviteRestNum}} </span>位
			</div>
			<div class="invite-gift">
				<div class="invite-gift-btn">
					<a href="javascript:;" id="getGift" class="get-gift-btn-disabled" v-if="isGetGift==0">领礼品</a>
					<a href="javascript:;" class="get-gift-btn" v-if="isGetGift==1" @click="goAddr">领礼品</a>
					<a href="javascript:;"  class="get-gift-btn-disabled over" v-if="isGetGift==2">已领完</a>
					<a href="javascript:;"  class="get-gift-btn-disabled got" v-if="isGetGift==3">已领取</a>
				</div>
				<div class="invite-gift-store" v-if="isGetGift==0">礼品剩余：{{giftStore}}份</div>
			</div>
		</div>
		<div class="mui-card invite-introducation-wrapper">
			<div class="mui-card-header invite-introducation">
				活动介绍
			</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner invite-content">
					<p class="color-black">1.点击下方【获取我的专属二维码】即可获取专属二维码</p>
					<p class="color-black">2.邀请好友通过扫描专属二维码关注爱特公众号</p>
					<p class="color-black">3.推荐满10位即可领取礼券包一份（内含：免费单次电脑洗车券2张、钣金喷漆100元抵用券1张、保养维修50元抵用券1张、免费专业48项检测1次</p>
					<p class="">备注：</p>
					<p>通过点击微信菜单 发现=>车主福利=>爱特踏青洗尘活动 即可进入活动页面</p>
					<p>礼品领取后将在3个工作日内寄出（包邮）</p>
					<p>本次活动最终解释权归爱特车服所有</p>
				</div>
			</div>

		</div>
		<div class="get-my-qrcode-wrapper" >
			<div class="get-my-qrcode" @click="getMyQrcode">获取我的专属二维码</div>
		</div>

	</div>
</template>
<style type="text/css">
	.invite-activity-container{margin-bottom:83px;}
	.invite-banner{background-color:#ddd;height:4rem;}
	.invite-banner img{display:block;}
	.invite-title{text-align:center;padding:10px 0;}
	.invite-title p{color:#333;margin:5px 0;}
	.invite-info{background:#fff;padding:10px;margin:10px;display:box;display:-webkit-box;display:-moz-box;display:-ms-box;align-items:center;box-shadow: 0 0 2px 2px rgba(200,200,200,0.2);margin-top:0;}
	.invite-count{box-flex:2;-webkit-box-flex:2;-moz-box-flex:2;-ms-box-flex:2;justify-content:center;border-right:1px solid #e1e1e1;font-size:14px;}
	.invite-count-num{font-size:20px;color:#d94f44;}
	.invite-count-rest-num{color:#999;}
	.invite-count-rest-text{margin-left:10px;}
	.invite-gift{box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;padding-left:10px;}
	.invite-count-num{font-size:18px;font-weight:600;padding:0 5px;}
	.invite-gift-btn{text-align:center;}
	.get-gift-btn{display:inline-block;background:#2081f8;color:#fff;border-radius:2px;margin-bottom:4px;padding:3px 26px;}
	.invite-gift-store{font-size:14px;text-align:center;}
	.invite-content{-webkit-font-smoothing:antialiased;}
	.get-my-qrcode{margin:15px 90px;border-radius:1000px;background:#2081f8;text-align:center;color:#fff;padding:6px 0;font-size:14px;box-shadow: 0 2px 2px #c1c1c1;}
	.get-my-qrcode-wrapper{position: fixed;bottom:0;left:0;width:100%;background:rgba(255,255,255,1);border-top:1px solid #eee;}
	.get-gift-btn-disabled{display:inline-block;background:#e0e0e0;color:#999;border-radius:2px;margin-bottom:4px;padding:3px 26px;}
	.invite-content .color-black{color:#333;}
	.invite-activity-container .mui-slider-indicator .mui-indicator{box-shadow:none;margin:0;}
	.get-gift-btn-disabled:active{color:#999;}
</style>
<script>
	import Page from '../../base/Page';
	import {API} from '../../config/constants';
	import mui from '../../common/mui';
	export default new Page({
		data(){
			return{
				inviteNum:'',
				inviteRestNum:'',
				giftStore:'',
				isGetGift:1,
				actId:''
			}
		},
		ready(){
			this.getJSON(API.GET_ACTIVITY_DETAIL,{},res=>{
				let resData = res.resultData;
				this.actId = resData.activityCondId;
				this.inviteNum = resData.activityCondSubsNum;
				this.inviteRestNum = resData.activityCondSubsNumRest;
				this.giftStore = resData.activityGetNumRest;
				console.log(this.giftStore);

					//如果未中奖
					if(resData.activityCondWin==0){
						if(resData.activityGetNumRest>0){  //当剩余数量大于0
							this.isGetGift = 0;
						}else{
							this.isGetGift = 2;
						}

					}else{
						if(resData.activityCondGet==0){  //已中奖但未领取
							this.isGetGift = 1;
						}else{                           //已中奖且领取
							this.isGetGift = 3;
						}
					}

			});

			//初始化轮播
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
			});

		},
		methods:{
			getMyQrcode:function(){
				this.getJSON(API.GET_ACTIVITY_QRCODE,{},res=>{
					if(res.code==200){
						mui.toast('获取成功');
						//close weixin browser
                        WeixinJSBridge.invoke('closeWindow',{},function(res){});
					}else if(res.code==954){
						mui.toast('生成二维码失败')
					}
				})
			},
			goAddr:function(){
				var id = this.actId;
				this.$route.router.go('/promo/activity_addr/'+id);
			}
		}
	})
</script>
